<template>
    <div>
      <div>
        <el-descriptions
            class="margin-top"
            title="用户信息"
            :column="3"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <tickets />
                </el-icon>
                编号
              </div>
            </template>
            <el-tag size="small">{{ userData.id }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon >
                  <user />
                </el-icon>
                用户名
              </div>
            </template>
            {{ userData.username }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon><Lock />
                </el-icon>
                密码
              </div>
            </template>
            {{ userData.password }}
          </el-descriptions-item>
        </el-descriptions>
    
      </div>

    </div>
</template>

<script>
import { useStore } from 'vuex';
import {computed} from "vue";
export default {
  setup() {
    const store = useStore();
    const  userData = computed(() => store.state.user.info);
    return {
      userData
    };
  }
}
</script>


<style scoped>
</style>